<template>
  <PageContainer title="新增账号">
    <!-- 具名插槽 位于页面右上角区域 -->
    <template #extra>
      <!-- 上传文件按钮 show-file-list不显示上传的文件 auto-upload不立即上传-->
      <el-upload :show-file-list="false" :auto-upload="false" :on-change="uploadFile" action="#">
        <el-button type="success" plain>批量导入</el-button>
      </el-upload>
    </template>

    <!-- 内容插槽 页面主元素的展示 -->
    <!-- 导入用户表单组件 status-icon显示校验反馈图标 rules绑定校验规则 -->
    <el-form :model="importUser" status-icon :rules="rules" ref="importUser" label-width="100px">
      <el-form-item label="身份" prop="identify">
        <el-radio-group v-model="importUser.identify" size="medium">
          <el-radio border label="学生" /><el-radio border label="教师" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="importUser.sex">
          <el-radio label="男" /><el-radio label="女" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="账号" prop="id">
        <el-input type="text" v-model="importUser.id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input type="text" v-model="importUser.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="学院" prop="collegeId">
        <CollegeSelect v-model="importUser.collegeId"></CollegeSelect>
      </el-form-item>
      <!-- 只有身份为学生时才会展示班级选项 -->
      <el-form-item label="班级" prop="majorId" v-if="importUser.identify === '学生'">
        <MajorSelect v-model="importUser.majorId" :collegeId="importUser.collegeId" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('importUser')">提交</el-button>
        <el-button @click="resetForm('importUser')">重置</el-button>
      </el-form-item>
    </el-form>
  </PageContainer>
</template>

<script>
import { insertUser, uploadInsertExcel } from '@/api/manage'
import PageContainer from '@/components/PageContainer'
import CollegeSelect from '@/components/CollegeSelect'
import MajorSelect from '@/components/MajorSelect'

export default {
  name: 'ImportUserPage', // 导入教师和学生页面
  components: {
    PageContainer,
    CollegeSelect,
    MajorSelect
  },
  data () {
    return {
      // 存放导入教师或学生的信息
      importUser: {
        identify: '学生',
        id: '',
        name: '',
        collegeId: '',
        majorId: '',
        sex: '男'
      },
      // 设置对应的校验规则
      rules: {
        id: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { pattern: /^\d{12}$/, message: '账号必须为12位数字', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { pattern: /^[\u4e00-\u9fa5]{2,16}$/, message: '姓名必须为2-16位汉字', trigger: 'blur' }
        ],
        collegeId: [{ required: true, message: '学院不能为空', trigger: 'blur' }],
        majorId: [{ required: true, message: '班级不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {
    // 监听学院id的变化
    'importUser.collegeId' (val, oldVal) {
      if (val !== oldVal) this.importUser.majorId = '' // 更改了学院 班级也要更改为空
    }
  },
  methods: {
    // 提交表单 发送请求
    submitForm (importUser) {
      // 校验数据是否合法
      this.$refs[importUser].validate(async (valid) => {
        if (valid) {
          await insertUser(this.importUser)
          this.$message.success('新增成功！')
          // 新增成功后清空表单
          this.importUser = { identify: '学生', sex: '男' }
        }
      })
    },
    // 重置表单
    resetForm (importUser) {
      this.$refs[importUser].resetFields()
      this.importUser.majorId = ''
    },
    // 上传文件
    async uploadFile (uploadFile) {
      // 上传文件前需要对文件进行校验
      const extension = uploadFile.raw.name.substring(uploadFile.raw.name.lastIndexOf('.') + 1)
      const size = uploadFile.raw.size / 1024 / 1024
      if (extension !== 'xls' && extension !== 'xlsx') {
        this.$message.error('只能上传后缀是.xls或.xlsx的文件')
        return
      }
      if (size > 10) {
        this.$message.error('文件大小不得超过10M')
        return
      }

      // uploadUpdateExcel()必须要传入一个FormData对象
      const formData = new FormData()
      formData.append('excelFile', uploadFile.raw)
      await uploadInsertExcel(formData)
      this.$message.success('批量导入成功')
    }
  }
}
</script>
